preface

我们在前端html页面的时候做表格最常用的就是jinja2渲染，这样的好处是无须引用外部插件，直接使用就行，方便。但是不好的就是前端CSS样式以及其他表格排序筛选功能需要自己写，增加了自己的代码量。为了提高前端的美观性以及功能性，我便开始使用第三方插件来做表格了。bootsrap-table这个插件，。

好了，废话不多说，我们开始说说怎么使用这个插件。

前端代码：

我们先看前端代码，这段代码插在html页面里面：

先简单解释下 罗列的参数：

• data-toggle： 不用写 JavaScript 直接启用表格。
• data-url ： 获取数据的url，可以使用jinja的写法。
• data-method： 获取数据的方法，建议写get，写post的话，django后端收不到post过来的数据。
• data-pagination 设置为 true 会在表格底部显示分页条
• data-side-pagination 设置分页的动作由后端django来做分页
• data-page-list： 设置可供选择的页面数据条数。设置为All 则显示所有记录。
• data-search： 启用搜索框
• searchOnEnterKey 设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
• data-show-refresh： 是否显示刷新按钮
• data-show-columns 内容列下拉框，在右上角的。
• data-show-toggle 是否显示 切换试图（table/card）按钮
• data-page-size 默认分页大小20行
• data-unique-id 设置table的主键为哪一列
• data-striped 设置为 true 会有隔行变色效果
• data-sortable 允许这列排序
• data-field 表示这个列数据设置一个名字，后端传入数据过来的时候属于这列的数据也必须带有相同的名字。待会看看后端的代码就知道怎么回事了。

html前端代码

    
    
                   
                          
                           
                           
资产ID(点击ID查看详情)
                           
资产编号
                           
产品线
                           
资产名
                           
管理IP
                           
厂商
                           
类型
                           
操作系统
                           
saltminion_id
                           
CPU型号
                           
CPU个数
                           
CPU总核数
                           
内存大小（MB）
                           
磁盘总空间（GB）
                           
资产管理员
                           
机房名
                           
购买日期
                           
创建日期
                          
                   
                                                                        

django-url路由匹配：

在url里面写的

urlpatterns = [    url(r'asset_show_table',views.show_asset_in_table,name='show_asset_in_table'),  # 展示资产信息在bootstrap-table里面    ]

djang-views的代码

这段代码是views里面的，里面的limit,offset，search，sort_column,order都是bootstrap-table插件在请求数据的时候会加上的，所以说我们需要在views里面去判断是否有这些参数。

• limit 表示每页有多少条记录
• offset 表示总共有多少条记录从数据库里获取的时候。
• search 搜索的关键字。
• sort_column 表示哪一列需要排序。
• order 表示排序是升序还是降序。

from django.db.models import Count,Sumdef get_ram_sum_size(asset_id):    '''    get the size of RAM and disk in total    :param asset_id:  asset's id    :return:   the size of RAM in total    '''    all_ram_slot = models.RAM.objects.filter(asset__id=asset_id)    all_disk_slot = models.Disk.objects.filter(asset__id=asset_id)    ram=0    for slot in all_ram_slot:        ram=ram+slot.capacity    disk = 0    for slot in all_disk_slot:        disk = disk+slot.capacity    return ram,diskdef show_asset_in_table(request):    '''    专门处理在服务器资产列表里面的表格信息的方法    :param request:     :return:     '''    if request.method == "GET":        print(request.GET)        limit = request.GET.get('limit')   # how many items per page        offset = request.GET.get('offset')  # how many items in total in the DB        search = request.GET.get('search')        sort_column = request.GET.get('sort')   # which column need to sort        order = request.GET.get('order')      # ascending or descending        if search:    #    判断是否有搜索字            all_records = models.Asset.objects.filter(id=search,asset_type=search,business_unit=search,idc=search)        else:            all_records = models.Asset.objects.all()   # must be wirte the line code here        if sort_column:   # 判断是否有排序需求            sort_column = sort_column.replace('asset_', '')                if sort_column in ['id','asset_type','sn','name','management_ip','manufactory','type']:   # 如果排序的列表在这些内容里面                if order == 'desc':   # 如果排序是反向                    sort_column = '-%s' % (sort_column)                all_records = models.Asset.objects.all().order_by(sort_column)            elif sort_column in ['salt_minion_id','os_release',]:                # server__ 表示asset下的外键关联的表server下面的os_release或者其他的字段进行排序                sort_column = "server__%s" % (sort_column)                if order == 'desc':                    sort_column = '-%s'%(sort_column)                all_records = models.Asset.objects.all().order_by(sort_column)            elif sort_column in ['cpu_model','cpu_count','cpu_core_count']:                sort_column = "cpu__%s" %(sort_column)                if order == 'desc':                    sort_column = '-%s'%(sort_column)                all_records = models.Asset.objects.all().order_by(sort_column)            elif sort_column in ['rams_size',]:                if order == 'desc':                    sort_column = '-rams_size'                else:                    sort_column = 'rams_size'                all_records = models.Asset.objects.all().annotate(rams_size = Sum('ram__capacity')).order_by(sort_column)            elif sort_column in ['localdisks_size',]:  # using variable of localdisks_size because there have a annotation below of this line                if order == "desc":                    sort_column = '-localdisks_size'                else:                    sort_column = 'localdisks_size'                #     annotate 是注释的功能,localdisks_size前端传过来的是这个值，后端也必须这样写，Sum方法是django里面的，不是小写的sum方法，                # 两者的区别需要注意，Sum（'disk__capacity‘）表示对disk表下面的capacity进行加法计算，返回一个总值.                all_records = models.Asset.objects.all().annotate(localdisks_size=Sum('disk__capacity')).order_by(sort_column)               elif sort_column in ['idc',]:                sort_column = "idc__%s" % (sort_column)                if order == 'desc':                    sort_column = '-%s'%(sort_column)                all_records = models.Asset.objects.all().order_by(sort_column)            elif sort_column in ['trade_date','create_date']:                if order == 'desc':                    sort_column = '-%s'%sort_column                all_records = models.Asset.objects.all().order_by(sort_column)        all_records_count=all_records.count()        if not offset:            offset = 0        if not limit:            limit = 20    # 默认是每页20行的内容，与前端默认行数一致        pageinator = Paginator(all_records, limit)   # 开始做分页        page = int(int(offset) / int(limit) + 1)            response_data = {'total':all_records_count,'rows':[]}   # 必须带有rows和total这2个key，total表示总页数，rows表示每行的内容        for asset in pageinator.page(page):                ram_disk = get_ram_sum_size(asset.id)    # 获取磁盘和内存的大小            # 下面这些asset_开头的key，都是我们在前端定义好了的，前后端必须一致，前端才能接受到数据并且请求.            response_data['rows'].append({                "asset_id": '%d' %(asset.id,asset.id),                   "asset_sn" : asset.sn if asset.sn else "",                "asset_business_unit": asset.business_unit if asset.business_unit else "",                "asset_name": asset.name if asset.name else "",                "asset_management_ip": asset.management_ip if asset.management_ip else "",                "asset_manufactory": asset.manufactory.manufactory if hasattr(asset,'manufactory') else "",                "asset_type": asset.asset_type if asset.asset_type else "",                "asset_os_release": asset.server.os_release if hasattr(asset,'server') else "",                "asset_salt_minion_id":asset.server.salt_minion_id if hasattr(asset,'server') else "",                "asset_cpu_count":asset.cpu.cpu_count if hasattr(asset,'cpu') else "",                "asset_cpu_core_count": asset.cpu.cpu_core_count  ,                "asset_cpu_model": asset.cpu.cpu_model if hasattr(asset,'cpu') else "",                "asset_rams_size": ram_disk[0] if ram_disk[0] else "",                "asset_localdisks_size" : ram_disk[1] if ram_disk[1] else "",                "asset_admin": asset.admin.username if asset.admin else "",                "asset_idc": asset.idc if asset.idc else "",                "asset_trade_date": asset.trade_date.strftime('%Y-%m-%d %H:%M') if asset.trade_date else "",                "asset_create_date" : asset.create_date.strftime("%Y-%m-%d %H:%M") if asset.create_date else "",                "update_date": asset.update_date.strftime("%Y-%m-%d %H:%M") if  asset.update_date else "",            })                    return  HttpResponse(json.dumps(response_data))    # 需要json处理下数据格式

需要注意的就是后端返回的数据要json格式的，且是字典的，带有total,rows这两个key，total表示总页数，rows是每一行的记录，每一行的记录必须是以asset_开头，因为前端我们是这样定义的，所以前后端必须保持一致。